import React, {Component} from 'react';
import './ChoosePharmavy.scss';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Drawer from '@material-ui/core/Drawer';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import Divider from '@material-ui/core/Divider';
import AddIcon from '@material-ui/icons/Add';

class ChoosePharmavy extends Component {
    constructor(props){
        super(props)
        this.state = {
            supplier:{},
            defaultSupplier:{},
            defaultServiceTypeIndex:0,
            selectServiceTypeIndex:0,
            bottomDrawer:false,
            selectServiceType:1,
            defaultActiveSup:{},
            isHasSup:false,
            isHasSupShow:true,
            isAddActive:0,
            supplier_select_service:{}
        }
    }
    selectSup = () => {
        this.setState({
            bottomDrawer:true
        })
    }
    choosedefaultServiceType = (index,item) =>{
        // console.log(item)
        this.setState({
            defaultServiceTypeIndex:index
        })
        this.props.getDataToChooseType(item)
    }
    chooseSelectServiceType = (index,item) => {
        // console.log(item)
        this.setState({
            selectServiceTypeIndex:index,
            selectServiceType:item.type
        })
    }
    componentWillReceiveProps(nextProps){
        if(Object.keys(nextProps.type).length){
            let param = new FormData();
            param.append('type', nextProps.type.type);
            param.append('supId', '');
            fetch('http://w.71cp.com/doctor_ajax.php?do=getSupByTYPE', {
                method: 'POST',
                body: param
            }).then((response) => {
                response.json().then((data) => {
                    // console.log(data)
                    if(data.code===1){
                        if(data.msg !== "拍照方"){
                            let selectKeys= Object.keys(data.data.select);
                            this.setState({
                                supplier:data.data,
                                defaultSupplier:data.data.default,
                                selectServiceType:selectKeys[0],
                                isHasSupShow:true,
                                isHasSup:false
                            })
                        }else{
                            this.setState({
                                supplier:{},
                                isHasSupShow:false,
                                isHasSup:false
                            })
                        }
                    }else{
                        this.setState({
                            supplier:{},
                            isHasSupShow:false,
                            isHasSup:true
                        })
                    }
                    this.props.getDataToisHasSup(this.state.isHasSup)
                    this.props.getDataTodefaultSupplier(this.state.defaultSupplier)
                    if ( Object.keys(this.state.defaultSupplier).length ){
                        let server = {
                            1: '代煎代送',
                            2: '自煎代送',
                            3: '代煎自取',
                            4: '自取',
                            5: '送货上门',
                            6: '货到付款',
                            '-1': '门店结算'
                        };
                        let arr=[]
                        let keys = Object.keys(this.state.defaultSupplier.serviceArr);
                        if (keys) {
                            keys.forEach((item, index) => {
                                arr.push({name: server[item], type: item,supplier_select_service:item})
                            })
                            // console.log(arr[0])
                            this.props.getDataToDefaultType(arr[0])
                        }
                    }
                })
            }).catch((error) => {
                alert(error)
            })

        }
    }
    toggleDrawer = (bool) =>{
        this.setState({
            bottomDrawer:bool
        })
    }
    storePhar= () => {
        this.setState({
            bottomDrawer:false
        })
    }
    onChooseSupBySelect = (item,index) => {
        console.log(item)
        this.setState({
            defaultSupplier:item,
            isAddActive:index
        })
    }

    // componentWillMount(){
    //     console.log(this.props.typeed)
    // }

    render() {
        
        let defaultService=null,
            defaultname=null,
            selectService=null,
            selectSup=null;
        if ( Object.keys(this.state.supplier).length ){
            let server = {
                1: '代煎代送',
                2: '自煎代送',
                3: '代煎自取',
                4: '自取',
                5: '送货上门',
                6: '货到付款',
                '-1': '门店结算'
            };
            let keys = Object.keys(this.state.defaultSupplier.serviceArr),
                selectKeys = Object.keys(this.state.supplier.select);
            let [arr,selectArr] = [[],[]];
            if (keys) {
                keys.forEach((item, index) => {
                    arr.push({name: server[item], type: item,supplier_select_service:item})
                })
                // console.log(arr[0])
            }
            if(selectKeys){
                selectKeys.forEach((item,index) => {
                    selectArr.push({name: server[item], type: item})
                })
            }

            // 非弹出层的服务方式 ，可选择
            defaultService = arr.map((item,index) => {
                return (
                    <Grid item xs={4} key={item.type}>
                        <Button variant="contained" color={this.state.defaultServiceTypeIndex===index?'secondary':'primary'} onClick={this.choosedefaultServiceType.bind(this,index,item)}>{item.name}</Button>
                    </Grid>
                )
            })
            // 非弹出层选中的药房
            defaultname = (
                <div>
                    <span>{this.state.defaultSupplier.name}</span>
                    <span>{this.state.defaultSupplier.address}</span>
                </div>
            )

            // 弹出层的配送方式 ，可选择
            selectService = selectArr.map((item,index) => {
                return (
                    <Grid item xs={4} key={item.type}>
                        <Button variant="contained" color={this.state.selectServiceTypeIndex===index?'secondary':'primary'} onClick={this.chooseSelectServiceType.bind(this,index,item)}>{item.name}</Button>
                    </Grid>
                )
            })

            // 弹出层的药房 ，可选择
            selectSup = this.state.supplier.select[this.state.selectServiceType].map((item,index) => {
                return (
                    <div key={item.fw_id}>
                        <ListItem className="selectSupItem" onClick={this.onChooseSupBySelect.bind(this,item,index)}>
                            <Button variant="fab" mini  color="secondary" aria-label="add" disabled={this.state.isAddActive===index?false:true}>
                                <AddIcon />
                            </Button>
                            <div>
                                <Typography variant="subheading" >
                                    {item.name}
                                </Typography>
                                <Typography  >
                                    {item.address}
                            </Typography>
                            </div>
                        </ListItem >
                        <Divider />
                    </div>
                )
            })
        }


        return (
            <div>
                {
                    this.state.isHasSupShow?(
                        <div className="ChoosePharmavy" >
                            <Grid container spacing={0} className="chooserbutton">
                                <Grid item xs={4}>
                                    <Button >推荐药房</Button>
                                </Grid>
                                <Grid item xs={8}>
                                    <Button  onClick={this.selectSup.bind(this)}>推荐其他药房</Button>
                                </Grid>
                            </Grid>
                            <div className="pharmacylist">
                                {defaultname}
                            </div>
                            <Grid  container spacing={0} className="typelist">
                                {defaultService}
                            </Grid>

                            <Drawer  
                                anchor="bottom"
                                open={this.state.bottomDrawer}
                                onClose={this.toggleDrawer.bind(this, true)}
                            >
                                <div 
                                    tabIndex={0}
                                    role="button">
                                    <AppBar position="static">
                                        <Toolbar>
                                            {/* <Button color="inherit"></Button> */}
                                            <Typography variant="title" color="inherit" className="flex">
                                                推荐药房
                                            </Typography>
                                            <Button color="inherit" onClick={this.storePhar.bind(this)}>保存</Button>
                                        </Toolbar>
                                    </AppBar>
                                    <Grid  container spacing={0} className="typelisted">
                                        {selectService}
                                    </Grid>
                                    <List className="suplist">
                                        {selectSup}
                                    </ List>  
                                </div>
                            </Drawer >
                        </div>
                    ):null
                }
            </div>
            
        );
    }
}

export default ChoosePharmavy;
